<template>
  <view class="wrapper">
    <view class="bgc">
      <view class="bgc_a">
        <view class="state">{{ orderInfo.is_send ? '已发货' : '待发货' }}</view>
        <view />
      </view>
      <view class="wiui">
        <view class="w_left">
          <image />
          <view class="gbg">
            <view>{{ orderInfo.is_send ? '已发货' : '待发货' }}</view>
            <view>请等待</view>
            <view>{{ orderInfo.create_time }}</view>
          </view>
        </view>
        <u-icon name="arrow-right" size="15px" color="#323232" />
      </view>
    </view>
    <view class="content">
      <view class="daaress box">
        <view class="int box">
          <view>{{ orderInfo.gift_name }}</view>
          <view style="margin-left: 14px">{{ orderInfo.mobile }}</view>
        </view>
        <view class="add">
          {{
            orderInfo.ap_name +
            ' ' +
            orderInfo.ac_name +
            ' ' +
            orderInfo.ad_name +
            ' ' +
            orderInfo.as_name
          }}
          {{ orderInfo.address }}
        </view>
      </view>
      <view class="int box">
        <view class="commodity">
          <image :src="orderInfo.prize.logo" />
          <view class="com_a">
            <view class="gro">
              <view class="inf_a">{{ orderInfo.prize.title }}</view>
              <view class="inf_b" />
            </view>
            <view class="inf_c">
              <view class="price">￥{{ orderInfo.prize.market_price }}</view>
              <view class="status">{{ orderInfo.is_send === 0 ? '发货审核中' : '' }}</view>
            </view>
          </view>
        </view>
        <!-- <view class="ceg">
          <view class="list">
            <view>商品总额</view>
            <view class="col">￥0.00</view>
          </view>
          <view class="list">
            <view>运费</view>
            <view>包邮</view>
          </view>
          <view class="glow">实付：<text>￥0.00</text></view>
        </view> -->
      </view>
      <view class="deta box">
        <view class="list">
          <view>提货时间</view>
          <view>{{ orderInfo.create_time }}</view>
        </view>
        <view class="list">
          <view>付款时间</view>
          <view>2023-11-02 13:10:58</view>
        </view>
        <view class="list">
          <view>快递公司</view>
          <view>{{ orderInfo.trip_company }}</view>
        </view>
        <view class="list">
          <view>快递单号</view>
          <view>{{ orderInfo.trip_number }}</view>
        </view>
      </view>
    </view>
    <view class="button">
      <view />
      <view>
        <button
          class="but_b"
          @click="showToast"
          :style="{
            background:
              orderInfo.is_send === 1 ? '#ccc' : 'linear-gradient(270deg, #ff8361, #ff5525)',
          }"
          :disabled="orderInfo.is_send == 1"
          >发货提醒</button
        >
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { onLoad } from '@dcloudio/uni-app';
  import { ref } from 'vue';
  import { orderNoticeApi } from '@/api/index';

  const orderInfo = ref({}) as any;
  function showToast() {
    orderNoticeApi({ order_id: orderInfo.id }).then(() => {
      uni.showToast({
        title: '提醒成功,已催促审核人员加急处理.请耐心等待',
        icon: 'none',
      });
    });
  }
  onLoad((query) => {
    const objString = decodeURIComponent(query?.item);
    const item = JSON.parse(objString);
    orderInfo.value = item;
  });
</script>
<style lang="scss" scoped>
  .wrapper {
    min-height: 100%;
    overflow-y: auto;
    background-color: #f4f5f7;
    padding-bottom: 75px;

    .bgc {
      width: 100%;
      height: 180px;
      background: linear-gradient(0deg, #ff8361, #ff5525);

      .bgc_a {
        padding: 15px 4% 0;

        .state {
          font-size: 18px;
          font-weight: 600;
          color: #fff;
          margin-bottom: 10px;
        }
      }

      .wiui {
        margin: 0 4%;
        margin-top: 10px;
        background: #feffff;
        border-radius: 3px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 13px 15px;

        .w_left {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;

          image {
            width: 18px;
            margin-right: 11px;
            padding-top: 3px;
          }

          .gbg {
            width: 85%;

            view {
              &:nth-of-type(1) {
                font-size: 15px;
                font-weight: 600;
                color: #323232;
              }

              &:nth-of-type(2) {
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                font-size: 13px;
                color: #323232;
                margin: 5px 0 5px;
              }

              &:nth-of-type(3) {
                font-size: 13px;
                color: #9d9d9d;
              }
            }
          }
        }
      }
    }

    .content {
      padding: 0px 15px;

      .box {
        margin-top: 15px;
        background: #fff;
        border-radius: 3px;

        .int {
          padding: 14px 10px 10px;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          view {
            &:nth-of-type(1) {
              font-size: 14px;
              color: #323232;
              font-weight: 600;
            }

            &:nth-of-type(2) {
              font-size: 14px;
              color: #323232;
            }
          }
        }

        .add {
          padding: 0 44px 17px 10px;
          font-size: 13px;
          color: #323232;
        }
      }
      .box {
        margin-top: 15px;
        background: #fff;
        border-radius: 3px;
      }
      .int {
        padding: 0 10px;

        .commodity {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 14px 0;
          border-bottom: 1px solid #eee;

          image {
            width: 91px;
            height: 91px;
            border-radius: 3px;
          }

          .com_a {
            width: calc(100% - 101px);
            height: 91px;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            .gro {
              .inf_a {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 600;
                color: #323232;
              }

              .inf_b {
                margin-top: 7px;
                font-size: 13px;
                color: #9d9d9d;
              }
            }

            .inf_c {
              display: flex;
              justify-content: space-between;

              .price {
                font-weight: 800;
              }

              .status {
                color: #ff9a2b;
              }
            }
          }
        }
        .ceg {
          .list {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 30px;
            view {
              font-size: 12px;
              color: #323232;
            }
            .col {
              color: #9d9d9d;
            }
          }
          .glow {
            padding: 13px 0;
            text-align: right;
            font-weight: 600;
            font-size: 12px;
            color: #323232;
            text {
              font-size: 17px;
              font-weight: 600;
              color: #323232;
            }
          }
        }
      }
      .deta {
        padding: 10px 10px;
        .list {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 25px;
          view {
            &:first-of-type {
              font-size: 12px;
              color: #323232;
              font-weight: 600;
            }
            &:last-of-type {
              font-size: 12px;
              color: #9d9d9d;
            }
          }
        }
      }
    }
    .button {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 92%;
      padding: 0 4%;
      height: 49px;
      background: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      view {
        .but_b {
          width: 91px;
          height: 37px;
          text-align: center;
          line-height: 37px;
          border-radius: 3px;
          font-size: 13px;
          color: #fff;
          background: linear-gradient(270deg, #ff8361, #ff5525);
        }
      }
    }
  }
</style>
